<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>

</head>
<body>
<div id="app">

    <!--<el-date-picker-->
            <!--v-model="value1"-->
            <!--type="date"-->
            <!--placeholder="选择日期">-->
    <!--</el-date-picker>-->

    <!--<el-date-picker-->
            <!--v-model="value2"-->
            <!--align="right"-->
            <!--type="date"-->
            <!--placeholder="选择日期"-->
            <!--:picker-options="pickerOptions1">-->
    <!--</el-date-picker>-->



        <el-date-picker
                v-model="value3"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
    <el-button type="primary" @click="add">提交</el-button>
    <div class="content-header">
        <h1>统计分析<small>会员数量</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>会员数量</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>




    <!--<el-table size="small" current-row-key="id" :data="users" stripe highlight-current-row>-->
        <!--<el-table-column type="index" align="center" label="序号"></el-table-column>-->
        <!--<el-table-column prop="age" label="年龄" align="center"></el-table-column>-->
        <!--<el-table-column prop="name" label="姓名" align="center"></el-table-column>-->

    <!--</el-table>-->


    <!--<el-button type="primary" @click="query">查询</el-button>-->




    <!--<el-form :label-position="labelPosition" label-width="80px" :model="user" >-->
        <!--<el-form-item label="名称">-->
            <!--<el-input v-model="user.name"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="年龄">-->
            <!--<el-input v-model="user.age"></el-input>-->
        <!--</el-form-item>-->
    <!--</el-form>-->
    <!--<el-button type="primary" @click="add">提交</el-button>-->





    <!--<el-table-->
            <!--:data="tableData"-->
            <!--stripe-->
            <!--style="width: 100%">-->
        <!--&lt;!&ndash;type="index"&ndash;&gt;-->
        <!--<el-table-column-->
                <!--prop="id"-->

                <!--label="序号"-->
                <!--width="180">-->
            <!--<template slot-scope="scope">-->
            <!--{{scope.$index}}-->

            <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="date"-->
                <!--label="日期"-->
                <!--width="180">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="name"-->
                <!--label="姓名"-->
                <!--width="180">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="address"-->
                <!--label="地址">-->
        <!--</el-table-column>-->
    <!--</el-table>-->





    <!--<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" >-->
        <!--<el-form-item label="名称">-->
            <!--<el-input v-model="formLabelAlign.name"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="活动区域">-->
            <!--<el-input v-model="formLabelAlign.region"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="活动形式">-->
            <!--<el-input v-model="formLabelAlign.type"></el-input>-->
        <!--</el-form-item>-->
    <!--</el-form>-->
    <!--<el-button type="primary" @click="add">提交</el-button>-->


</div>

<script>

    var vm=new Vue({
     el:"#app",

    data:{

         users:[],

         user:{
             name:"",
             age:""
        },

        labelPosition: 'right',
        formLabelAlign: {
            name: '',
            region: '',
            type: ''
        },


        // tableData: [{
        //     date: '2016-05-02',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //     date: '2016-05-04',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1517 弄'
        // }, {
        //     date: '2016-05-01',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1519 弄'
        // }, {
        //     date: '2016-05-03',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1516 弄'
        // }],



        pickerOptions1: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                }
            }]
        },
        value1: '',
        value2: '',
        value3:"",
    },

     methods:{
         add(){
            this.getTime();
         },
         checkTime(i){

             if(i<10){

                 i = '0'+i

             }

             return i

         },
         getTime(){

             var time01= new Date(this.value3[0])
             var time02= new Date(this.value3[1])

             var dateTime01 = time01.getFullYear()+'-'+this.checkTime(time01.getMonth()+1)+'-'+this.checkTime(time01.getDate());
             var dateTime02 = time02.getFullYear()+'-'+this.checkTime(time02.getMonth()+1)+'-'+this.checkTime(time02.getDate());

             var myChart1 = echarts.init(document.getElementById('chart1'));
                // dateTime01:dateTime01
                // dateTime02:dateTime02

             // 使用刚指定的配置项和数据显示图表。
             //myChart.setOption(option);

             axios.get("/report/everyMonthReport?dateTime01="+dateTime01+"&&dateTime02="+dateTime02).then((res)=>{
                 myChart1.setOption(
                     {
                         title: {
                             text: '会员数量'
                         },
                         tooltip: {},
                         legend: {
                             data:['会员数量']
                         },
                         xAxis: {
                             data: res.data.data.months
                         },
                         yAxis: {
                             type:'value'
                         },
                         series: [{
                             name: '会员数量',
                             type: 'line',
                             data: res.data.data.memberCount
                         }]
                     });
             });
         }

         // add1(){
         //     console.log(this.value3);
         //     axios.post("/test3.do?value3="+this.value3).then((res)=>{
         //
         //     })
         // }
     }


 })
</script>
</body>
</html>